<template>
	<view class="s-hw_box">
		<view class="s-hw_number">{{n_num}}%</view>
		<view class="s-hw_contrast">
			<view class="s-hw_circle"></view>
			<view class="s-hw_bubbles">
				<view/><view/><view/><view/><view/><view/><view/><view/>
				<view/><view/><view/><view/><view/><view/><view/>
			</view>
		</view>
	</view>
</template>

<script>
	// 华为手机充电动态效果 s-hw-charge
	export default {
		name:'s-hw-charge',
		props:{
			num:{type:[String,Number],default:'0.00'}
		},
		computed:{
			n_num(){
				return this.num>=100 ? 100 : this.num
			},
		},
	}
</script>

<style lang="scss" scoped>
	.s-hw{
		&_box{
			position: relative;
			background: #000;
			height: 100%;
		}
		&_number {
			position: absolute;
			width: 600rpx;
			left: calc(50% - 300rpx);
			bottom: 520rpx;
			text-align: center;
			font-size: 64rpx;
			z-index: 10;
			color: #fff;
		}
		&_contrast {
			position: absolute;
			bottom: 0;
			left: calc(50% - 300rpx);
			filter: contrast(10) hue-rotate(0);
			height: 800rpx;
			background-color: #000;
			overflow: hidden;
			animation: hw_hueRotate 10s infinite linear;
		}
		&_circle {
			position: relative;
			width: 600rpx;
			height: 600rpx;
			box-sizing: border-box;
			filter: blur(16rpx);
			margin: 0 auto;
			&::after {
				content: "";
				position: absolute;
				top: 40%;
				left: 50%;
				transform: translate(-50%, -50%) rotate(0);
				width: 400rpx;
				height: 400rpx;
				background-color: #00ff6f;
				border-radius: 42% 38% 62% 49% / 45%;
				animation: hw_rotate 10s infinite linear;
			}
			&::before {
				content: "";
				position: absolute;
				width: 352rpx;
				height: 352rpx;
				top: 40%;
				left: 50%;
				transform: translate(-50%, -50%);
				border-radius: 50%;
				background-color: #000;
				z-index: 10;
			}
		}
		&_bubbles {
		    position: absolute;
		    left: 50%;
		    bottom: 0;
		    width: 100px;
		    height: 40px;
		    transform: translate(-50%, 0);
		    border-radius: 100px 100px 0 0;
		    background-color: #00ff6f;
		    filter: blur(5px);
			view {
			    position: absolute;
			    border-radius: 50%;
			    background: #00ff6f;
			}
			@for $i from 0 through 15 {
			    view:nth-child(#{$i}) {
			        $width: 15 + random(15) + px;
			        left: 15 + random(70) + px;
			        top: 50%;
			        transform: translate(-50%, -50%);
			        width: $width;
			        height: $width;
			        animation: hw_moveToTop #{random(6) + 3}s ease-in-out -#{random(5000)/1000}s infinite;
			    }
			}
		}
	}
	@keyframes hw_rotate {
	    50% {border-radius: 45% / 42% 38% 58% 49%;}
	    100% {transform: translate(-50%, -50%) rotate(720deg);}
	}
	@keyframes hw_moveToTop {
	    90% {opacity: 1;}
	    100% {opacity: .1;transform: translate(-50%, -360rpx);}
	}
	@keyframes hw_hueRotate {
	    100% {filter: contrast(15) hue-rotate(360deg);}
	}
</style>